<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程网</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
        <!-- 搜索 -->
         <div class="serch-index">
            <div class="serch"> 搜索:目的地/酒店/景点/航班号</div>
            <a href="#" class="user">登 入</a>
         </div>
        <!-- 轮播图 -->
          <div class="focus">
            <img src="./upload/focus.jpg" alt="">
          </div>
        <!-- 局部导航 -->
            <ul class="local_nav">
                <li>
                    <a href="#" title="景点—玩乐">
                        <span class="local_nav_icon icon"></span>
                        景点—玩乐
                    </a>
                </li>
                <li>
                    <a href="#" title="周边游">
                        <span class="local_nav_icon icon1"></span>
                        周边游
                    </a>
                </li>
                <li>
                    <a href="#" title="美食林">
                        <span class="local_nav_icon icon2"></span>
                        美食林
                    </a>
                </li>
                <li>
                    <a href="#" title="一日游">
                        <span class="local_nav_icon icon3"></span>
                        一日游
                    </a>
                </li>
                <li>
                    <a href="#" title="当地攻略">
                        <span class="local_nav_icon icon4"></span>
                        当地攻略
                    </a>
                </li>
            </ul>
        <!-- 主导航 -->
         <nav>
            <div class="nav-common">
                <div class="navcommon">
                    <a href="#" title="海外酒店">海外酒店</a>
                </div>
                <div class="navcommon">
                    <a href="#" title="海外酒店">海外酒店</a><a href="#" title="海外酒店">海外酒店</a>
                </div>
                <div class="navcommon">
                    <a href="#" title="海外酒店">海外酒店</a><a href="#" title="海外酒店">海外酒店</a>
                </div>
            </div>
            <div class="nav-common">
                <div class="navcommon">
                    <a href="#" title="海外酒店">海外酒店</a>
                </div>
                <div class="navcommon">
                    <a href="#" title="海外酒店">海外酒店</a><a href="#" title="海外酒店">海外酒店</a>
                </div>
                <div class="navcommon">
                    <a href="#" title="海外酒店">海外酒店</a><a href="#" title="海外酒店">海外酒店</a>
                </div>
            </div>
            <div class="nav-common">
                <div class="navcommon">
                    <a href="#" title="海外酒店">海外酒店</a>
                </div>
                <div class="navcommon">
                    <a href="#" title="海外酒店">海外酒店</a><a href="#" title="海外酒店">海外酒店</a>
                </div>
                <div class="navcommon">
                    <a href="#" title="海外酒店">海外酒店</a><a href="#" title="海外酒店">海外酒店</a>
                </div>
            </div>
         </nav>
        <!-- 尾部导航 -->
          <ul class="fu_nav">
            <li>
                <a href="#">
                    <span class="fu_nav_icon-1"></span>
                    <span>网络</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="fu_nav_icon-2"></span>
                    <span>网络</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="fu_nav_icon-3"></span>
                    <span>网络</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="fu_nav_icon-4"></span>
                    <span>网络</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="fu_nav_icon-5"></span>
                    <span>网络</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="fu_nav_icon-6"></span>
                    <span>网络</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="fu_nav_icon-7"></span>
                    <span>网络</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="fu_nav_icon-8"></span>
                    <span>网络</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="fu_nav_icon-9"></span>
                    <span>网络</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="fu_nav_icon-10"></span>
                    <span>网络</span>
                </a>
            </li>
          </ul>
        <!-- 销售模块 -->
         <div class="mai-box">
            <div class="mai-hd">
                <h2>热门活动</h2>
                <a href="#" class="more">获取更多福利</a>
            </div>
         </div>
         <div class="mai-bd">
            <div class="row">
                <a href="#"><img src="./upload/pic1.jpg" alt=""></a>
                <a href="#"><img src="./upload/pic2.jpg" alt=""></a>
            </div>
            <div class="row">
                <a href="#"><img src="./upload/pic3.jpg" alt=""></a>
                <a href="#"><img src="./upload/pic4.jpg" alt=""></a>
            </div>
            <div class="row">
                <a href="#"><img src="./upload/pic5.jpg" alt=""></a>
                <a href="#"><img src="./upload/pic6.jpg" alt=""></a>
            </div>
         </div>
         <!-- 底部 -->
         <ul class="end">
         <li><a href="#" title="电话预定">
            <span class="icon"></span>
            <span>电话预定</span>
         </a>
        
         </li>
        <li><a href="#" title="电话预定">
                <span class="icon"></span>
                <span>下载客户端</span>
            </a>
        
        </li>
        <li><a href="#" title="电话预定">
                <span class="icon"></span>
                <span>我的</span>
            </a>
        
        </li>
         </ul>
         <p>
            <span class="span1">
                网站地图 | Language | 电脑版
                
            </span><br>
            <span class="span2">
                &copy;2018携程旅行 | 沪ICP备08023580号
            </span>
         </p>
            
        
        
</body>
</html>